<template>
  <div class="containers" ref="content">
    <div class="canvas">
      <div class="bpmn" ref="canvas">

      </div>
    </div>
  </div>
</template>

<script>
    import BpmnViewer from 'bpmn-js/lib/Viewer'
    import ModelingModule from 'bpmn-js/lib/features/modeling'
    import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
    import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll/ZoomScroll'
    import {
        append as svgAppend,
        attr as svgAttr,
        create as svgCreate
    } from 'tiny-svg'
    export default {
      name:'BpmView',
        props:{
            xml:{
                type:String,
                default(){
                    return ''
                }
            },
         passPath:{
                type:Object,
                default(){
                    return {}
                }
            },
        },
        components: {

        },
        data() {
            return {
                bpmnModeler: null,
              canvas: null,
              scale: 1.0,
                ctrlDown: false,
                container: null,
            }
        },
        watch:{

        },
        methods: {
            open(){
              if(this.bpmnModeler===null){
                this.initBpmn()
              }
              this.createNewDiagram()
            },
            createNewDiagram() {
                const bpmnXmlStr = this.xml
                // 将字符串转换成图显示出来
                this.bpmnModeler.importXML(bpmnXmlStr).then(res => {
                    this.addEventBusListener()
                    const canvas = this.bpmnModeler.get('canvas')
                  if(this.passPath&&this.passPath.passPath){
                    this.setNodeColor(this.passPath.passPath,'nodeSuccess',canvas)
                    this.setNodeColor(this.passPath.currentPath||[],'currentNode',canvas)

                    const marker = svgCreate('marker')
                    svgAttr(marker, {
                      id: 'sequenceflow-arrow-normal',
                      viewBox: '0 0 20 20',
                      refX: '11',
                      refY: '10',
                      markerWidth: '10',
                      markerHeight: '10',
                      orient: 'auto'
                    })

                    const path = svgCreate('path')

                    svgAttr(path, {
                      d: 'M 1 5 L 11 10 L 1 15 Z',
                      style:
                          'fill:#50f950; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; '
                    })

                    const defs = document.querySelector('defs')
                    svgAppend(marker, path)
                    svgAppend(defs, marker)
                  }
                  this.scale =  canvas.zoom('fit-viewport', 'auto')
                  this.canvas  = canvas

                })
            },
            addEventBusListener() {
                // 监听 element
                const eventBus = this.bpmnModeler.get('eventBus')
                eventBus.on('element.click', (e) => {
                    //解决编辑label组件的问题，让他直接选中他的业务组件
                    if (element.type === 'label') {
                        //获取lable的业务组件

                    }

                })
                const overlays = this.bpmnModeler.get('overlays')
                eventBus.on('element.hover', (e) => {
                    // const $overlayHtml = `<div class="tipBox">
                    // 你好，我是悬浮框里的内容
                    // </div>`
                    // overlays.add(e.element.id, {
                    //     position: {top: e.element.height, left: 0},
                    //     html: $overlayHtml
                    // })
                })
                eventBus.on('element.out', () => {
                    overlays.clear()
                })
                eventBus.on('selection.changed', (res) => {
                    this.$emit('selection',res)
                })
            },
            setNodeColor(nodeCodes, colorClass, canvas) {
                for (let i = 0; i < nodeCodes.length; i++) {
                    canvas.addMarker(nodeCodes[i], colorClass)
                }
            },
            initBpmn() {
                const canvas = this.$refs.canvas
                this.bpmnModeler = new BpmnViewer({
                    container: canvas,
                    //添加快捷键
                    keyboard: {
                        bindTo: window
                    },
                  additionalModules: [
                    ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此
                    MoveCanvasModule, // 移动整个画布
                    ZoomScrollModule, // 缩放
                  ]
                })



            },
          onkeydown(e){
            if (e.keyCode === 17) this.ctrlDown = true
          },
          onkeyup(e){
            if (e.keyCode === 17) this.ctrlDown = false
          },
          onmousewheel(e){
            e.preventDefault()
            if(this.ctrlDown) {
              if(e.wheelDeltaY > 0) {  // 放大
                this.scale += 0.1
              } else {  // 缩小
                this.scale -= 0.1
              }
              this.canvas.zoom(this.scale)
            }
          },
          lisenScrol() {
            document.addEventListener('keydown', this.onkeydown)
            document.addEventListener('keyup', this.onkeyup)
            this.$refs.canvas.addEventListener('mousewheel',this.onmousewheel,{ passive: false })
          },
        },
      beforeDestroy() {
        document.removeEventListener('keydown',this.onkeydown)
        document.removeEventListener('keyup', this.onkeyup)
        this.$refs.canvas.removeEventListener('mousewheel',this.onmousewheel)

      },
      mounted() {
         this.lisenScrol()
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

    .containers {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;

    }

    .canvas {
        /*网格*/
        background-size: 10px 10px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        background-image: linear-gradient(90deg, rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%),
        linear-gradient(rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%);

        width: 100%;
        height: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        border-right: 1px solid #eee;
        position: relative;
        display: flex;

        .bpmn {
            width: 100%;
            height: 100%;
        }


    }
    /deep/ .nodeSuccess:not(.djs-connection) {
        .djs-visual {
            > :nth-child(1) {
                stroke: #50f950 !important;
                stroke-width: 3px !important;
            }
        }
    }
    /deep/ .djs-connection.nodeSuccess{
        path {
            stroke: #50f950 !important;
            marker-end: url(#sequenceflow-arrow-normal) !important;
        }
    }

    /deep/ .currentNode:not(.djs-connection) {
        .djs-visual {
            > :nth-child(1) {
                stroke: #f70e0e !important;
                stroke-width: 3px !important;
            }
        }
    }

</style>
